フロントエンド WebHID デバイス列挙：JavaScript を使用した接続デバイスの検出

WebHID API は、通常ネイティブアプリケーションでのみアクセス可能な幅広いヒューマンインターフェースデバイス（HID）とウェブアプリケーションが直接通信できる可能性を秘めています。これにより、ゲームコントローラー、カスタム入力デバイス、科学機器などの特殊なハードウェアと対話する革新的なウェブエクスペリエンスを作成するための刺激的な可能性が開かれます。この包括的なガイドでは、目的の HID デバイスとの接続を確立するための重要な最初のステップであるデバイス列挙の基本概念について詳しく説明します。

WebHID API とは何ですか？

WebHID API を使用すると、ウェブアプリケーションはヒューマンインターフェースデバイスにアクセスできます。これらのデバイスは、次のような幅広いカテゴリを包含します。

• ゲームコントローラー：ジョイスティック、ゲームパッド、レーシングホイール
• 入力デバイス：キーボード、マウス、トラックボール
• 産業用制御：特殊なコントロールパネル、センサーインターフェース
• 科学機器：データ収集デバイス、測定ツール
• カスタムハードウェア：特定の目的のために作成された特注の入力デバイス

限定的な HID サポートを提供していた古いブラウザ API とは異なり、WebHID API は HID デバイスへの直接アクセスを提供し、開発者はよりリッチでインタラクティブなウェブアプリケーションを作成できます。リモートラボでロボットアームを制御したり、カスタム入力デバイスで 3D モデルを操作したり、ウェブベースのダッシュボードでセンサーデータを直接受信したりすることを想像してみてください。これらすべてがブラウザ内で可能です。

HID デバイス列挙の理解

HID デバイスと対話する前に、ウェブアプリケーションはユーザーのシステムに接続されているデバイスを検出する必要があります。このプロセスはデバイス列挙と呼ばれます。WebHID API は、ベンダー ID（VID）と製品 ID（PID）に基づいて、またはより広範なフィルターを使用して、特定の HID デバイスへのアクセスを要求するメカニズムを提供します。

通常、このプロセスには次の手順が含まれます。

1. デバイスアクセスの要求：ウェブアプリケーションは、navigator.hid.requestDevice() を使用して、HID デバイスを選択するようにユーザーに促します。
2. デバイスのフィルタリング：フィルターを指定して、ユーザーに提示されるデバイスのリストを絞り込むことができます。これらのフィルターは、デバイスの VID と PID に基づいています。
3. デバイスの選択の処理：ユーザーはリストからデバイスを選択します。
4. デバイスのオープン：アプリケーションは、選択したデバイスへの接続を確立します。
5. データ転送：接続が確立されると、アプリケーションはデバイスとの間でデータを送受信できます。

デバイス列挙のステップバイステップガイド

1. フィルターを使用したデバイスアクセスの要求

navigator.hid.requestDevice() メソッドは、HID デバイスへのアクセスを要求するためのエントリポイントです。これは、オプションの `filters` 引数を受け取ります。これは、検索するデバイスの VID と PID を指定するオブジェクトの配列です。

特定の VID と PID を持つデバイスへのアクセスを要求する方法の例を次に示します。

async function requestHIDDevice() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        {
          vendorId: 0x1234, // デバイスのベンダー ID に置き換えます
          productId: 0x5678 // デバイスの製品 ID に置き換えます
        },
        // 必要に応じて、他のデバイスのフィルターを追加します
      ]
    });

    if (devices.length > 0) {
      const device = devices[0]; // 最初に選択したデバイスを使用します
      console.log("HID デバイスが見つかりました：", device);
      // デバイスを開いて通信を開始します
      await openHIDDevice(device);
    } else {
      console.log("HID デバイスが選択されていません。");
    }
  } catch (error) {
    console.error("HID デバイスの要求エラー：", error);
  }
}

// 使用例（例：ボタンクリックによってトリガーされます）：
document.getElementById('requestButton').addEventListener('click', requestHIDDevice);

重要な考慮事項：

• ベンダー ID（VID）と製品 ID（PID）：これらは、USB および Bluetooth デバイスに割り当てられた一意の識別子です。対象のデバイスの VID と PID を、製造元のドキュメントから取得するか、システムツール（Windows のデバイスマネージャー、macOS のシステム情報、または Linux の `lsusb` など）を使用して取得する必要があります。
• ユーザーの同意：requestDevice() メソッドは、ブラウザ制御のアクセス許可プロンプトをユーザーに表示し、アクセスを許可する HID デバイスを選択できるようにします。これは、悪意のあるウェブサイトがユーザーの同意なしに機密性の高いハードウェアにアクセスするのを防ぐための重要なセキュリティ対策です。
• 複数のフィルター：`filters` 配列に複数のフィルターを含めて、異なる VID と PID を持つデバイスへのアクセスを要求できます。これは、アプリケーションが複数のハードウェア構成をサポートしている場合に役立ちます。

2. デバイス情報の取得

ユーザーがデバイスを選択すると、requestDevice() メソッドは HIDDevice オブジェクトの配列を返します。各 HIDDevice オブジェクトには、VID、PID、usagePage、usage、コレクションなど、デバイスに関する情報が含まれています。この情報を使用して、デバイスをさらに識別および構成できます。

async function openHIDDevice(device) {
  try {
    await device.open();
    console.log("HID デバイスが開かれました：", device.productName);

    // 入力レポートをリッスンします
    device.addEventListener("inputreport", event => {
      const { data, reportId } = event;
      const uint8Array = new Uint8Array(data.buffer);
      console.log(`受信した入力レポート ${reportId}:`, uint8Array);
      // 入力レポートデータを処理します
    });

    device.addEventListener("disconnect", event => {
      console.log("HID デバイスが切断されました：", device.productName);
      // デバイスの切断を処理します
    });

  } catch (error) {
    console.error("HID デバイスのオープンエラー：", error);
  }
}

デバイスのプロパティ：

• vendorId：デバイスのベンダー ID。
• productId：デバイスの製品 ID。
• productName：製品の人間が読める名前。
• collections：デバイスの HID コレクション（レポート、機能など）を記述する HIDCollectionInfo オブジェクトの配列。これは非常に複雑になる可能性があり、複雑なデバイスにのみ必要です。

3. デバイスの接続と切断の処理

WebHID API は、デバイスが接続または切断されたときにアプリケーションに通知するイベントを提供します。navigator.hid オブジェクトの connect イベントと disconnect イベントをリッスンできます。

navigator.hid.addEventListener("connect", event => {
  const device = event.device;
  console.log("HID デバイスが接続されました：", device);
  // デバイスの接続を処理します（例：デバイスを再度開きます）
});

navigator.hid.addEventListener("disconnect", event => {
  const device = event.device;
  console.log("HID デバイスが切断されました：", device);
  // デバイスの切断を処理します（例：リソースをクリーンアップします）
});

接続管理のベストプラクティス：

• 接続時の再列挙：デバイスが接続されたら、デバイスを再列挙して、アプリケーションが最新のリストを持っていることを確認することをお勧めします。
• 切断時のリソースのクリーンアップ：デバイスが切断されたら、それに関連付けられているリソースを解放します（例：デバイス接続を閉じ、イベントリスナーを削除します）。
• エラー処理：デバイスが接続に失敗したり、予期せずに切断されたりする状況を適切に処理するために、堅牢なエラー処理を実装します。

高度なデバイスフィルタリング技術

基本的な VID および PID フィルタリングに加えて、WebHID API は特定のデバイスをターゲットにするためのより高度な手法を提供します。これは、複数のインターフェースまたは機能を持つデバイスを扱う場合に特に役立ちます。

1. 使用状況ページと使用状況によるフィルタリング

HID デバイスは、デバイスが提供する機能のタイプを定義する*使用状況ページ*と*使用状況*に編成されています。たとえば、キーボードは「汎用デスクトップ」使用状況ページに属し、「キーボード」使用状況があります。使用状況ページと使用状況に基づいてデバイスをフィルタリングして、特定のデバイスタイプをターゲットにできます。

async function requestSpecificKeyboard() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        {
          usagePage: 0x01, // 汎用デスクトップページ
          usage: 0x06      // キーボード使用状況
        }
      ]
    });

    // ... (デバイスを処理するための残りのコード)
  } catch (error) {
    console.error("HID デバイスの要求エラー：", error);
  }
}

使用状況ページと使用状況の値の検索：

• HID 使用状況テーブル：公式の HID 使用状況テーブル（USB Implementers Forum によって公開）は、さまざまなデバイスタイプに対して標準化された使用状況ページと使用状況を定義します。
• デバイスドキュメント：デバイス製造元のドキュメントには、デバイスの使用状況ページと使用状況の値が指定されている場合があります。
• HID レポート記述子：高度なシナリオでは、デバイスの HID レポート記述子を分析して、サポートされている使用状況ページと使用状況を判別できます。

2. 複数のインターフェースの処理

一部の HID デバイスは複数のインターフェースを公開しており、それぞれに独自の機能セットがあります。WebHID API は、各インターフェースを個別の HID デバイスとして扱います。特定のインターフェースにアクセスするには、VID/PID フィルタリングと使用状況ページ/使用状況フィルタリングを組み合わせて、目的のインターフェースをターゲットにする必要がある場合があります。

実用的な例とユースケース

1. カスタムゲームコントローラーインターフェースの構築

ウェブベースのゲームを構築していて、カスタムゲームコントローラーをサポートしたいとします。WebHID API を使用して、コントローラーのボタン、ジョイスティック、その他のコントロールから直接入力を読み取ることができます。これにより、応答性が高く、没入型のゲーム体験を作成できます。

2. ウェブベースの MIDI コントローラーの作成

ミュージシャンとオーディオエンジニアは、デジタルオーディオワークステーション（DAW）またはシンセサイザーと対話するウェブベースの MIDI コントローラーの恩恵を受けることができます。WebHID API を使用すると、ブラウザで直接 MIDI メッセージを送受信するカスタム MIDI コントローラーを構築できます。

3. 科学機器との対話

研究者と科学者は、WebHID API を使用して、データ収集デバイス、センサー、測定ツールなどの科学機器とインターフェースできます。これにより、ウェブベースのダッシュボードまたは分析ツールでデータを直接収集および分析できます。

4. アクセシビリティアプリケーション

WebHID は、支援技術を作成する機会を提供します。たとえば、運動障害のあるユーザー向けの特殊な入力デバイスをウェブアプリケーションに直接統合して、よりカスタマイズされたアクセスしやすいエクスペリエンスを提供できます。グローバルな例としては、ハンズフリーナビゲーション用の特殊なアイトラッキングデバイスや、さまざまな言語と入力方法でシングルスイッチアクセス用のカスタマイズ可能なボタン配列の統合などがあります。

クロスブラウザの互換性とセキュリティに関する考慮事項

1. ブラウザのサポート

WebHID API は現在、Chromium ベースのブラウザ（Chrome、Edge、Opera）でサポートされており、他のブラウザ向けに開発中です。アプリケーションに WebHID API を実装する前に、ブラウザの互換性を確認し、API をサポートしていないブラウザ用のフォールバックメカニズムを提供することが重要です。

2. セキュリティに関する考慮事項

WebHID API はセキュリティを考慮して設計されています。ブラウザは、ウェブアプリケーションが HID デバイスにアクセスすることを許可する前に、ユーザーに許可を求めます。これにより、悪意のあるウェブサイトがユーザーの同意なしに機密性の高いハードウェアにアクセスするのを防ぎます。さらに、WebHID API はブラウザのセキュリティサンドボックス内で動作し、アプリケーションのシステムリソースへのアクセスを制限します。

• HTTPS のみ：WebHID は、他の強力なウェブ API と同様に、安全なコンテキスト（HTTPS）で動作する必要があります。
• ユーザーのジェスチャー：デバイスアクセスを要求するには、通常、不要なアクセス要求を防ぐためにユーザーのジェスチャー（例：ボタンクリック）が必要です。
• Permissions API：Permissions API を使用して、WebHID のアクセス許可をクエリおよび管理できます。

一般的な問題のトラブルシューティング

1. デバイスが見つかりません

アプリケーションが HID デバイスを見つけられない場合は、VID と PID を再確認してください。それらがデバイスの実際の識別子と一致することを確認してください。また、デバイスが正しく接続され、オペレーティングシステムによって認識されていることを確認してください。

2. アクセス許可が拒否されました

ユーザーが HID デバイスへのアクセスを拒否した場合、アプリケーションはデバイスと通信できません。アクセスが必要な理由をユーザーにメッセージで表示して説明することにより、このシナリオを適切に処理します。ユーザーがアプリケーションと対話するための代替手段を提供することを検討してください。

3. データ形式の問題

HID デバイスは、データの送受信にカスタムデータ形式を使用することがよくあります。デバイスのデータ形式を理解し、アプリケーションで適切な解析およびシリアル化ロジックを実装する必要があります。データ形式については、デバイス製造元のドキュメントを参照してください。

結論

WebHID API は、ヒューマンインターフェースデバイスと直接通信する革新的でインタラクティブなウェブアプリケーションをウェブ開発者が作成できるようにします。デバイス列挙、フィルタリング、および接続管理の原則を理解することで、WebHID API の可能性を最大限に引き出し、魅力的なユーザーエクスペリエンスを作成できます。WebHID の力を活用してウェブを物理世界に接続し、世界中の創造性、生産性、アクセシビリティの新たな可能性を育みましょう。

参考資料

• WebHID API 仕様
• Chrome Developers の WebHID API
• USB Implementers Forum (HID 情報)